<template>
  <div class="largeScreen">
    <div class="top-title">
      <div class="left-title">工程车辆无计划作业管理平台</div>
      <div class="right-back" @click="goHome">
        <div class="left-icon" />
        <div class="right-text">返回首页</div>
      </div>
    </div>
    <leftPage />
    <rightPage />
    <centerPage />
    <div class="map-description">
      <div class="map-list">
        <div class="map-item-fence" />
        <div>电子围栏</div>
      </div>
      <div class="map-list">
        <div class="map-item-pull" />
        <div>停车区</div>
      </div>
      <div class="map-list">
        <div class="map-item-trajectory" />
        <div>行车轨迹</div>
      </div>
    </div>
    <!-- <pictureMap /> -->
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router"
import leftPage from "./components/leftPage.vue"
import rightPage from "./components/rightPage.vue"
import centerPage from "./components/centerPage.vue"
const router = useRouter() // 使用 Vue Router 实例
console.log(router, "router")
// 使用 router.push 来跳转到首页
const goHome = () => {
  router.push("/menu/companyService") // 使用 Vue Router 进行路由切换
  console.log(router, "router")
}
</script>
<style lang="scss" scoped>
.uno-padding-20 {
  padding: 0 !important;
}

.largeScreen {
  // display: flex;
  background-color: rgb(72, 72, 72);
  position: relative;
  width: 100vw;
  height: 100vh;

  .top-title {
    width: 100%;
    height: 94px;
    background-image: url("../../assets/images/bgc-title.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* 防止图片重复 */
    display: flex;
    justify-content: space-between;
    z-index: 99999;
    position: absolute;

    .left-title {
      font-family: PangMenZhengDao, PangMenZhengDao;
      font-weight: 400;
      font-size: 40px;
      color: #ffffff;
      // letter-spacing: 8px;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 20px;
      margin-left: 25px;
    }

    .right-back {
      display: flex;
      align-items: center;
      width: 113px;
      height: 40px;
      margin-top: 20px;
      margin-right: 32px;
      cursor: pointer;

      .left-icon {
        width: 40px;
        height: 40px;
        background-image: url("../../assets/images/icon-back.png");
        background-size: 100% 100%;
      }

      .right-text {
        font-family: "Alibaba PuHuiTi 2", "Alibaba PuHuiTi 20";
        font-weight: normal;
        font-size: 16px;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(180deg, #ffffff 10%, #63b3fa 100%);
        -webkit-background-clip: text;
        /* 对于 Safari/Chrome */
        background-clip: text;
        /* 对于其他浏览器 */
        color: transparent;
        /* 使文字本身透明，显示背景 */
      }
    }
  }

  .map-description {
    width: 18.875rem;
    height: 1.25rem;
    position: absolute;
    bottom: 2.625rem;
    left: 28%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .map-list {
      display: flex;
      align-items: center;

      .map-item-fence {
        width: 1.125rem;
        height: 1.125rem;
        background-image: url("../../assets/images/icon-fence.png");
        background-size: 100% 100%;
        margin-right: 0.625rem;
      }

      .map-item-pull {
        width: 1.125rem;
        height: 1.125rem;
        background-image: url("../../assets/images/icon-pull.png");
        background-size: 100% 100%;
        margin-right: 0.625rem;
      }

      .map-item-trajectory {
        width: 1.25rem;
        height: 0.5rem;
        border-radius: 6px 6px 6px 6px;
        background: #059669;
        margin-right: 0.625rem;
      }
    }
  }
}
</style>
